<html>
    <head>
    	<meta charset="utf-8">
    	<title>提示框效果</title>
    	<style type="text/css">
            #outer{width:620px;height:300px;margin: 0 auto;font-size: 12px;color: #57646E;border: 1px solid #000;text-align: center;}
            h2{line-height: 50px;}
            h2,ul,li{margin: 0px;padding:0px; list-style: none;}
            ul{zoom:1; text-align: center;}
            ul li{border:1px solid #333;float: left;display: inline;position: relative;margin: 10px;}
            ul li img{position:absolute;top:-14;left:-14;border: 1px solid #999;cursor: crosshair;display: none;}
            ul a{width: 80px;height: 80px; display: block;background: #f0f0f0;color: #666;text-decoration: none;padding: 10px;}
            strong{display: block; font-size: 14px;}
            .zindex{z-index: 1;}
    	</style>
    </head>
    <body>
        <div id="outer">
            <h2 id="a">名车车标展示-鼠标移过显示车标</h2>
            <ul>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/1.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/2.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/3.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/4.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/5.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/1.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/2.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/3.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/4.jpg" />
                </li>
                <li>
                    <a href="javascript:;"><strong>BMW</strong>宝马汽车</a>
                    <img src="imgs/5.jpg" />
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function  () {
            var oli=document.getElementsByTagName('li');
            var oimg=document.getElementsByTagName('img');
            var oa=document.getElementsByTagName('a');
            for(var i=0;i<oli.length;i++){
                oa[i].index=oimg[i].index=i;
                oa[i].onmouseover=function(){
                    oli[this.index].className="zindex";
                    oimg[this.index].style.display="block";
                }
                oa[i].onmouseout=function(){
                    oli[this.index].className="";
                    oimg[this.index].style.display="none";
                }
                oimg[i].onmouseover=function(){
                    oli[this.index].className="zindex";
                    oimg[this.index].style.display="block";
                }
                oimg[i].onmouseout=function(){
                    oli[this.index].className="";
                    oimg[this.index].style.display="none";
                }
            }
        }
    </script>
</html>